<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
		<script type="text/javascript" src="outer-up.js"></script>
	</head>

	<body>
		<script>
			console.log("第一个$(function() {})之前的");

			$(function() {
				console.log("第一个$(function(){})中获取文本框的值：" + $("#text1").val());
				console.log("第一个$(function(){})中获取后面声明的a的值：" + a);
			});

			console.log("第一个$(function() {})之后的");

			console.log("在文本框前获取文本的值：" + $("#text1").val());
		</script>
		<input type="text" id="text1" value="文本1" />
		
		<script type="text/javascript" src="outer-center.js"></script>
		
		<script>
			console.log("在文本框后获取文本的值：" + $("#text1").val());
			var a = 1;

			$(function() {
				console.log("页面最后的$(function(){})中的");
			});

			console.log("页面最后的$(function(){})之后的");
		</script>
		<script type="text/javascript" src="outer-down.js"></script>
	</body>
<!--
	分析如下：
	1.打印顺序：第一个$(function(){})中获取文本框的值：文本1==》第一个$(function(){})中获取啊的值：1==》页面最后的$(function(){})中的;三条最后顺序打印
		页面中的$(function(){})无论是在什么位置，都是在页面和其他js执行完才执行的，并且位置靠前的$(function(){})中的内容先执行。
	
	2.打印顺序：第一个$(function(){})中获取后面声明的a的值：1；在a的前面的$(function(){})中可以获取后面声明的变量a
		$(function(){})是在其他js执行完才执行，所以在$(function(){})中可以获取它位置后声明的变量。
	
	3.打印顺序：在文本框前获取文本的值：undefined==》在文本框后获取文本的值：文本1;在页面文本框前通过js获取不到其value值，在文本框后可以获得。
		说明页面中的普通js代码和html代码也是顺序执行的。
	
	4.打印顺序：
		外部的js-上
		第一个$(function() {})之前的
		第一个$(function() {})之后的
		在文本框前获取文本的值：undefined
		外部的js-中
		在文本框后获取文本的值：文本1
		页面最后的$(function(){})之后的
		外部的js-下
		页面中的两个js代码块和引用的三个外部js文件是顺序执行的。
		
		页面中的普通js代码是顺序执行的。
	
	
	
-->
</html>